<template>
    <div>
        <!--<div class="col-lg-12 col-md-12 col-sm-12">
            <div style="width: 30%;height: 60px;background: #f2f2f2;position: absolute;margin-left: 50px;">
                <div style="width: 40%;height: 60px;float: left;line-height: 60px;text-align: center">
                    <img src="images/ask.png" alt="" style="vertical-align: middle">
                    <span style="color: #727272;font-size: 1.2em;">提问</span>
                </div>
                <div style="width: 40%;height: 60px;float: right;line-height: 60px;">
                    <img src="images/text.png" alt="" style="vertical-align: middle">
                    <span style="color: #727272;font-size: 1.2em;">攻略</span>
                </div>
            </div>
        </div>-->

        <div class="col-lg-12 col-md-12 col-sm-12" style="height: 100px"></div>

        <div class="col-lg-12 col-md-12 col-sm-12">

            <template v-for="(strategy,i) in strategys">

                <div v-if="i%2==0" class="advisor-div">
                    <div class="advisor-div-content advisor-div-content-right">
                        <div style="width: 100%;height: 10%">
                            <div style="width: 100px;height: 40px;background: #F45B4B;color: white;text-align: center;
                                line-height: 40px;position: relative;top: 20px;float: right">问答</div>
                        </div>
                        <div style="width: 90%;height: 88%;text-align: center;position: relative;top: 20px;left: 40px;">
                            <h3 style="font-weight: 800">{{ strategy.title }}</h3>
                            <h5> &nbsp;</h5>
                            <p>{{ strategy.summary }}</p>
                            <a @click="goDetail(strategy.id)">更多</a>
                        </div>
                    </div>
                    <div class="advisor-div-img advisor-div-img-left">
                        <img :src="strategy.imagesrc" style="width: 100%;height: 100%" alt="">
                    </div>
                </div>

                <div v-else class="advisor-div">
                    <div class="advisor-div-content advisor-div-content-left">
                        <div style="width: 100%;height: 10%">
                            <div style="width: 100px;height: 40px;background: #F45B4B;color: white;text-align: center;
                                line-height: 40px;position: relative;top: 20px;">问答</div>
                        </div>
                        <div style="width: 90%;height: 88%;text-align: center;position: relative;top: 20px;left: 40px;">
                            <h3 style="font-weight: 800">{{ strategy.title }}？</h3>
                            <h5> &nbsp;</h5>
                            <p>{{ strategy.summary }}</p>
                            <a @click="goDetail(strategy.id)">更多</a>
                        </div>
                    </div>
                    <div class="advisor-div-img advisor-div-img-right">
                        <img :src="strategy.imagesrc" style="width: 100%;height: 100%" alt="">
                    </div>
                </div>
            </template>





            <!--<div class="advisor-div">
                <div class="advisor-div-content advisor-div-content-left">
                    <div style="width: 100%;height: 10%">
                        <div style="width: 100px;height: 40px;background: #F45B4B;color: white;text-align: center;
                                line-height: 40px;position: relative;top: 20px;">攻略</div>
                    </div>
                    <div style="width: 90%;height: 88%;text-align: center;position: relative;top: 20px;left: 40px;">
                        <h3 style="font-weight: 800">装修有哪些建议？</h3>
                        <h5>提问者：fly</h5>
                        <p>一、装修的第一步。</p><p>你在网上找到的装修流程是从设计开始吗？还是从水电开始？NoNoNo！新手常犯的错误就是按照网上最常见的程序来，等到快装完了，对着用不到的插座，够不到的开关欲哭无泪。那第一步是什么呢？</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="advisor-div-img advisor-div-img-right">
                    <img src="http://demo.cssmoban.com/cssthemes3/zeroth_28_zSarah/images/img03.jpg" style="width: 100%;height: 100%" alt="">
                </div>
            </div>-->

            <div style="text-align: center">
                <nav>
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</template>
<style>

    @media (max-width: 700px){
        .advisor-div-content{
            width: 100%;
            height: 50%;
        }
        .advisor-div-img{
            width: 100%;
            height: 50%;
        }
        .advisor-div{
            width: 90%;
            height: 400px;
            border: solid 1px #ccc;
            margin: auto;
        }
    }
    @media (min-width: 700px){
        .advisor-div-content-left{
            width: 48%;
            height: 100%;
            float: left
        }
        .advisor-div-img-right{
            width: 48%;
            height: 100%;
            float: right
        }
        .advisor-div-content-right{
            width: 48%;
            height: 100%;
            float: right
        }
        .advisor-div-img-left{
            width: 48%;
            height: 100%;
            float: left
        }
        .advisor-div{
            width: 90%;
            height: 400px;
            position: relative;
            margin-left: 50px;
            border: solid 1px #ccc;
        }
    }
</style>
<script>
    export default{
        data(){
            return{
                strategys:''
            }
        },
        components:{

        },
        created(){
            const _this = this;
            this.$http.get('/getStrategy')
                .then(function(res){
                    _this.strategys = res.body;
                });
        },
        methods:{
            goDetail(id){
                 window.location.href = '/advisor_detail?id='+id;
            }
        }
    }
</script>
